<div class="index-wrapper dark-bg md:!pt-4">
  <div class="light-box max-[1000px]:w-full">
    <div
      class="component-box hidden-scrollbar hidden 2xl:block"
      *ngIf="commonService.settings.components.length"
      [ngStyle]="{ width: componentMaxWidth }"
    >
      <component-group #componentChild direction="column"></component-group>
    </div>

    <main
      class="homepage dark-border-color dark-bg w-full xl:w-[1000px] lg:w-[800px]"
      [ngClass]="{
        '2xl:w-[1200px]':
          commonService.settings.lightImages.length <= 0 && !componentMaxWidth
      }"
    >
      <nav
        #parent
        *ngIf="commonService.websiteList.length"
        class="top-nav dark-border-color dark-bg"
      >
        <span
          #item
          *ngFor="
            let item of commonService.websiteList.slice(
              0,
              commonService.overIndex
            );
            index as i;
            trackBy: commonService.trackByItem
          "
          (click)="handleClickTop($event, item)"
          [class.active]="commonService.oneIndex === i"
          [class.dark-text-active]="commonService.oneIndex === i"
          class="over-item ripple-btn dark-text"
        >
          {{ item.title }}
        </span>
        <!-- More -->
        <app-web-more-menu
          *ngIf="commonService.overIndex < commonService.websiteList.length"
          [data]="
            commonService.websiteList.slice(commonService.overIndex, 99999)
          "
          [index]="commonService.overIndex"
          [page]="commonService.oneIndex"
          (onClick)="commonService.handleClickClass($event)"
        />
      </nav>

      <section class="index-section select-none dark-bg">
        <div
          class="sidebar dark-bg dark-border-color auto-scrollbar"
          *ngIf="
            commonService.websiteList[commonService.oneIndex] &&
            commonService.websiteList[commonService.oneIndex].nav.length > 1
          "
        >
          <div
            class="tag dark-text"
            [class.active]="commonService.twoIndex === i"
            [class.dark-item-active]="commonService.twoIndex === i"
            (click)="commonService.handleClickClass(item.id)"
            *ngFor="
              let item of commonService.websiteList[commonService.oneIndex].nav;
              index as i;
              trackBy: commonService.trackByItem
            "
          >
            {{ item.title }}
          </div>
        </div>

        <div class="main" id="main-scroll">
          <app-search />
          <div
            class="px-2 sticky top-0 left-0 z-10"
            *ngIf="commonService.currentList.length > 1"
          >
            <app-class-tabs
              [data]="commonService.currentList"
              selector="#main-scroll"
            />
          </div>

          <div *ngIf="commonService.currentList.length > 0; else noData">
            <nz-spin
              nzSimple
              *ngIf="commonService.sliceMax === 0"
              class="position-center"
            ></nz-spin>
            <div
              *ngFor="
                let item of commonService.currentList.slice(
                  0,
                  commonService.sliceMax
                );
                index as i;
                trackBy: commonService.trackByItem
              "
              class="nav-wrapper"
            >
              <app-toolbar-title
                [dataSource]="item"
                (onCollapse)="commonService.onCollapse(item)"
              />

              <div
                class="px-3"
                [ngClass]="
                  commonService.settings.lightCardStyle === 'icon'
                    ? 'flex flex-wrap gap-x-6 gap-y-4'
                    : 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-3'
                "
                [class.hidden]="item['collapsed']"
              >
                <app-card
                  *ngFor="
                    let el of item.nav;
                    trackBy: commonService.trackByItemWeb
                  "
                  [cardStyle]="commonService.settings.lightCardStyle"
                  [dataSource]="el"
                  class="column-border"
                />
              </div>
            </div>
          </div>

          <ng-template #noData>
            <app-no-data />
          </ng-template>
        </div>
      </section>
    </main>

    <app-side-images
      class="max-[1280px]:w-[200px] max-[1080px]:hidden"
      [data]="commonService.settings.lightImages"
      *ngIf="commonService.settings.lightImages.length > 0"
    />
  </div>

  <app-footer [content]="commonService.settings.lightFooterHTML" />
  <app-fixbar
    (onCollapse)="commonService.onCollapseAll()"
    [collapsed]="commonService.collapsed"
    selector=".main"
  />
</div>
